<template>
	<view class="" style="position: relative;">
		<view class="">
			<cu-custom :isBack="true" :bgColor="'#ffffff'">
				<view slot="content" class="title">
					选择客户
				</view>
			</cu-custom>

			<view class="">
				<view class="search-cont">
					<view class="left">
						<view class="lg text-gray cuIcon-search icon-search">

						</view>
						<input v-model="keyWord" @confirm="getCustomer" type="text" placeholder="输入名称或手机号" />
					</view>
				</view>
			</view>
		</view>

		<view class="grant-staus">
			<view @click="grantClick(item,index)" class="grant-item" :class="{active:grantIndex == index}"
				v-for="(item,index) in grantStaus" :key="index">
				{{item.title}}
				<image v-if="grantIndex == index" src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/sanjiaoxing.png" mode=""></image>
			</view>
		</view>


		<view class="list-box">
			<view class="list-item" v-for="(value,key) in obj" :key="key">
				<view class="name">
					{{key}}
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in value" :key="index">
						<view class="left">
							<view class="img">{{item.name.slice(0,1)}}</view>
							<!-- <image src="/static/logo.png" mode=""></image> -->
							<view class="info">
								<view class="user-name text-cut">
									{{item.name}}
								</view>
								<view class="user-phone text-cuts">
									手机号：{{item.telphone}}
								</view>
							</view>
						</view>
						<view class="right" @click="activateItem(item,index)">
							<image v-if="item.active" src="../../../../static/service/select-s.png" mode=""></image>
							<image v-else src="../../../../static/service/select.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="select-client-box">
				<data-null v-if="!Object.keys(obj).length"></data-null>
			</view>
			
		</view>





		<view class="" style="height: 300rpx;">

		</view>

		<view class="bottom-box-cont">
			<view class="activate-list">
				<view class="activate-item">
					<view class="left">
						<view class="text">
							已选择：
						</view>
						<view class="img-box">
							<view v-if="item.active" class="img-box-item" v-for="(item,index) in list" :key="index">
								{{item.name.slice(0,1)}}
							</view>
						</view>
					</view>
					<view class="right" @click="openSelect">
						<text>查看</text>
						<i class="lg text-gray cuIcon-right"></i>
					</view>
				</view>
			</view>
			<view @click="submit" class="bottom-box ">
				确定
			</view>
		</view>

		<openSelect ref="openSelect" :list="list" @change="handleDel"></openSelect>
	</view>
</template>

<script>
	import {
		getCustomerList
	} from "@/api/pet/service/saler.js"
	import {listClientLabel} from "@/api/pet/client/label.js"
	import search from "./components/search"
	import openSelect from "./components/open-select"
	export default {
		components: {
			search,
			openSelect
		},
		data() {
			return {
				obj:{},
				list:[],
				grantIndex: 0,
				grantStaus: [],
				keyWord:''
			}
		},
		onLoad() {
			this.pet_team = uni.getStorageSync('pet_team')
			this.getClientLabel()
		},
		methods: {
			getClientLabel(){
				this.grantStaus = []
				listClientLabel({
					type:'SERVICE',
					teamId:this.pet_team.teamId
				}).then(res=>{
					this.grantStaus = [{
						id:'',
						title:'全部'
					},...res]
					this.getCustomer()
				})
			},
			getCustomer(){
				getCustomerList({
					teamId:this.pet_team.teamId,
					type:'SERVICE',
					label:this.grantStaus[this.grantIndex].id || '',
					keyWord:this.keyWord
				}).then(res=>{
					// this.list = []
					for (let key in res) {
						for (let i = 0; i < res[key].length; i++) {
							res[key][i].active = false
							if(this.list.length){
								for (let j = 0; j < this.list.length; j++) {
									if(this.list[j].id == res[key][i].id){
										res[key][i].active = true
									}
								}
							}
						}
					}
					this.obj = res
					// this.list = JSON.parse(JSON.stringify(this.list))
				})
			},
			handleDel(index,item){
				this.list.splice(index,1)
				
				for (let key in this.obj) {
					for (let i = 0; i < this.obj[key].length; i++) {
						if(this.obj[key][i].id == item.id){
							this.obj[key][i].active = false
						}
					}
				}
				this.obj = JSON.parse(JSON.stringify(this.obj))
			},
			openSelect() {
				this.$refs.openSelect.open()
			},
			activateItem(item, index) {
				item.active = !item.active
				this.obj = Object.assign({}, this.obj)
				if(item.active){
					this.list.push(item)
				}else{
					let findIndex = this.list.findIndex(e=>e.id == item.id)
					this.list.splice(findIndex,1)
				}
			},
			grantClick(item, index) {
				this.grantIndex = index
				this.getCustomer()
			},
			submit(){
				let pages = getCurrentPages();
				let page = pages[pages.length - 2];
				if(page.route == 'pagesPet/pages/service/saler/serve/grant'){
					
					page.$vm.submitCustomer(this.list)
					
				}
				uni.navigateBack()
			},
		}
	}
</script>
<style>
	.select-client-box .data-null image{
		 margin-top: 0 !important;
	}
</style>
<style scoped lang="scss">
	.list-box {
		padding: 0 32rpx;

		.list-item {
			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: var(--h2Color);
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 24rpx;
				margin-top: 48rpx;
				// &:first-child{
				// 	margin-top: 0;
				// }
			}

			.list {
				.item {
					margin-bottom: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&:last-child {
						margin-bottom: 0;
					}

					.left {
						display: flex;
						align-items: center;

						.img {
							width: 96rpx;
							height: 96rpx;
							margin-right: 32rpx;
							border-radius: 50%;
							font-size: 40rpx;
							line-height: 96rpx;
							text-align: center;
							background:  var(--primaryBg);
							color:#fff;
						}

						.info {
							.user-name {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 30rpx;
								color: var(--h1Color);
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								margin-bottom: 8rpx;
							}

							.user-phone {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: var(--h3Color);
								line-height: 37rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}

					.right {
						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

				}
			}
		}
	}

	.grant-staus {
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;

		.grant-item {
			padding: 0 32rpx;
			height: 56rpx;
			background: #F8F8F8;
			border-radius: 28rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: var(--h2Color);
			line-height: 37rpx;
			text-align: center;
			font-style: normal;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;

			image {
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				transform: translateX(-50%);
				width: 24rpx;
				height: 12rpx;
			}

			&.active {
				color: var(--h1Color);
				background: var(--primaryBg);
			}
		}

	}

	.bottom-box-cont {
		border-top: 1rpx solid #f0f0f0;
		position: fixed;
		bottom: 0;
		background: #fff;
		padding: 0 32rpx 64rpx 32rpx;
		backdrop-filter: blur(8px);

		.activate-list {
			height: 102rpx;
			display: flex;
			align-items: center;

			.activate-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					display: flex;
					align-items: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: var(--h3Color);
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
				}

				.left {
					display: flex;
					align-items: center;

					.text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 26rpx;
						color: var(--h1Color);
						line-height: 37rpx;
						text-align: center;
						font-style: normal;
					}

					.img-box {
						white-space: nowrap;
						overflow: auto;
						width: 500rpx;

						.img-box-item {
							width: 48rpx;
							display: inline-block;
							margin-right: 12rpx;
							border-radius: 50%;
							font-size: 30rpx;
							line-height: 48rpx;
							text-align: center;
							background: var(--primaryBg);
							color: #fff;
						}
					}
				}
			}
		}

		.bottom-box {

			width: 686rpx;
			height: 96rpx;
			background: var(--primaryBg);
			border-radius: 48rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--btnColor);
			line-height: 45rpx;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;

			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}




	.search-cont {
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx;
		position: static;
		top: 0;

		.left {
			position: relative;
			width: 100%;

			.icon-search {
				position: absolute;
				left: 15rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			input {
				padding: 0 30rpx 0 60rpx;
				width: 100%;
				height: 76rpx;
				background: #F8F8F8;
				border-radius: 40rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			view {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: var(--h1Color);
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>